<template>
	<view class="container">
		<view class="content">
			<homeCom class="" v-if="activeKey === 'home'"></homeCom>
			<memoryCom class="" v-if="activeKey === 'memory'">记忆</memoryCom>
			<calendarCom class="" v-if="activeKey === 'calendar'">日历</calendarCom>
			<mineCom class="" v-if="activeKey === 'mine'"></mineCom>
		</view>
		<view class="bottom-bar">
			<button @click="onClick(item)" v-for="item in list" class="item" v-bind:class="{active: activeKey === item.key}">
				<text class="text">{{item.name}}</text>
			</button>
		</view>
	</view>
</template>

<script>
	import homeCom from '../home/homeCom.vue';
	import mineCom from '../mine/mineCom.vue';
	import calendarCom from '../calendar/calendarCom.vue';
	import memoryCom from '../memory/memoryCom.vue';
	export default {
		components: {
			homeCom,
			mineCom,
			calendarCom,
			memoryCom
		},
		data() {
			return {
				activeKey: 'home',
				list: [{
						name: '主页',
						key: 'home'
					},
					{
						name: '记忆',
						key: 'memory'
					},
					{
						name: '日历',
						key: 'calendar'
					},
					{
						name: '我的',
						key: 'mine'
					},
				]
			}
		},
		methods: {
			onClick(item) {
				this.activeKey = item.key;
				// console.log('33334::' + item.key);
				// if (item.key === 'memory') {
				// 	uni.navigateTo({
				// 		url: "/pages/memory/memory_list/memory_list"
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.bottom-bar {
			position: fixed;
			bottom: 5px;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			flex-wrap: wrap;

			.item {
				width: 22%;
				height: 40px;
				border: 1px solid gray;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 2px;

				&.active {
					color: red;
					border-color: red;
				}
			}

			.text {
				font-size: 15rpx;
				font-weight: bold;

			}
		}
	}
</style>